<!-- 用户信息 -->
<template>
  <el-card shadow="never" body-style="padding: 20px;" class="el-card">
    <div class="ele-cell workplace-user-card">
      <div class="ele-cell-content ele-cell">
        <el-avatar :size="68" src="/imgs/user.png" />
        <div class="ele-cell-content" style="bac">
          <h4 class="ele-elip" style="font-weight: bold;font-size:24px;">
            欢迎
            <span style="color:#417AE8;">{{ loginUser.nickname }}</span>
             来到开发者平台
          </h4>

          <div class="ele-text-secondary ele-elip" style="margin-top: 8px" v-if="userData.type == 1">
            <span style="color:#FF5800;">到期时间：{{ userData.maturity_time }}</span>
          </div>

          <div class="ele-text-secondary ele-elip" style="margin-top: 8px" v-if="userData.name">
            <div class="package-type">{{userData.name}}</div>
          </div>
        </div>
      </div>
      <div class="workplace-count-group" v-if="userData.appsecret">
        <div class="workplace-count-item">
          <div class="workplace-count-header">
            <el-button size="small" type="primary" @click="copy_url(userData.appsecret)">复制秘钥</el-button>
          </div>
          <div class="workplace-count-num">秘钥：{{ userData.appsecret }}</div>
        </div>
       
      </div>
    </div>
  </el-card>
</template>

<script>
  import { getAccountProfileData  } from '@/api/user/info';
  export default {
    name: 'ProfileCard',
    computed: {
      // 当前登录用户信息
      loginUser() {
        return this.$store.state.user.info;
      }
    },
    data() {
      return {
       
        // 表单数据
        userData: {
          type:0,
          appsecret:'',
          maturity_time:'',
        },

        
      };
    },
    methods: {
      copy_url(content){
        if (window.clipboardData) {
          window.clipboardData.setData('text', content);
        } else {
          (function (content) {
            //oncopy 事件在用户拷贝元素上的内容时触发。
            document.oncopy = function (e) {
              e.clipboardData.setData('text', content);
              e.preventDefault(); //取消事件的默认动作
              document.oncopy = null;
            }
          })(content);
          document.execCommand('Copy');
        }
        this.$message.success('复制成功！');
      },
    },
    mounted() {
      getAccountProfileData().then((msg) => {
          this.userData = msg;
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
     }
  };
</script>

<style scoped>

  .package-type{
    text-align: center;
    background: rgb(255, 88, 0);
    color: #fff;
    width: 100px;
    padding: 5px;
    border-radius: 5px;
  }
  .el-card{
    background-image: url('~@/assets/bg/account-profile.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  .workplace-user-card .ele-cell-content {
    overflow: hidden;
  }

  .workplace-count-group {
    white-space: nowrap;
  }

  .workplace-count-item {
    padding: 0 5px 0 25px;
    box-sizing: border-box;
    display: inline-block;
    text-align: right;
  }

  .workplace-count-name {
    padding-left: 8px;
  }

  .workplace-count-num {
    font-size: 16px;
    margin-top: 6px;
  }

  @media screen and (max-width: 992px) {
    .workplace-count-item {
      padding: 0 5px 0 10px;
    }
  }

  @media screen and (max-width: 768px) {
    .workplace-user-card,
    .workplace-count-group {
      display: block;
    }

    .workplace-count-group {
      margin-top: 15px;
      text-align: right;
    }
  }
</style>
